import { Outlet, NavLink, useNavigate } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import React, { useContext, useEffect } from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined, HomeOutlined } from '@ant-design/icons';
import DropdownCom from './Dropdown';
import { GlobalContext } from '../contexts/GlobalContext';
const { Header, Content, Footer, Sider } = Layout;

const menuItem = [
  {
    key: ``,
    icon: React.createElement(HomeOutlined),
    label: `首页`,
  },
  {
    key: `product`,
    icon: React.createElement(LaptopOutlined),
    label: `商品管理`,
  },
  {
    key: `order`,
    icon: React.createElement(NotificationOutlined),
    label: `订单管理`,
  },
  {
    key: `user`,
    icon: React.createElement(UserOutlined),
    label: `用户主页`,
  },
];

export default function AuthLayout() {
  const globalContext = useContext(GlobalContext);
  const navigate = useNavigate();

  useEffect(() => {
    // 开发时可注释以下代码，以免跳回登录页面
    console.log(globalContext);
    // if (!globalContext.user.username) {
    //   navigate('/login');
    // }
  }, []);

  const handleMenuClick = (e) => {
    console.log(e);
    navigate(e.key);
  };

  return (
    <>
      {/*<Layout style={{ height: '100%' }}>*/}
      {/*  <Header style={{ display: 'flex', justifyContent: 'right' }}>*/}
      {/*    <DropdownCom />*/}
      {/*  </Header>*/}
      {/*  <Layout>*/}
      {/*    <Sider>*/}
      {/*      <Menu mode="inline" style={{ height: '100%', borderRight: 0 }} items={menuItem} onClick={handleMenuClick} />*/}
      {/*    </Sider>*/}
          <Layout>
            <Content style={{ margin: 15 }}>
              <Outlet />
            </Content>
            <Footer style={{ textAlign: 'center' }}>商品管理系统 ©{new Date().getFullYear()} Made by muturichenerri</Footer>
          </Layout>
        {/*</Layout>*/}
       {/*</Layout>*/}
    </>
  );
}
